<template>
  <div class="home">
    <canvas id="screenshotCanvas" style="display: none;"></canvas>
    <div class="cover-photo-box" :style="{ backgroundImage: 'url(' + imgUrl + ')',backgroundSize: 'cover'}">
        <div class="header" @click="isShowImg=!isShowImg">
          <div class="h1"><span>日拱一卒</span></div>
        </div>
        <div class="date" @click="getWords">
          <div style="color:#fff;font-size: 4vw;">{{String(newYear).slice(2)}}-{{String(newMonth).padStart(2,0)}}</div>
          <div style="color:yellow;font-size: 7vw;">{{newDay}}</div>
          <div style="color:#fff;font-size: 4vw;">{{ncWeek}}</div>
        </div>
        <div class="subtitle" v-show="isShowTitle">
          <p class="titleindex">SS #{{titleIndex}}/{{titleTotal}}</p>
          <p class="titlecontent" :style="margeTop">{{titleContent}}</p>
        </div>

    
    </div>
   <div class="content-box">
      <div class="sentence" >
        <div @click="isShowTitle=!isShowTitle">/</div>
        <div v-html="curWord" @click="getTitle"></div>
      </div>
      
      <img v-show="isShowImg" src="../assets/share.jpg" alt="" class="share-img" />
    </div>

    

    <footer @click="shareImg">
      ---------------@非凡编程----------------
    </footer>
  </div>
</template>

<script setup>
import HugeDay from './HugeDay.vue'
import { autoPicture } from '../utils/export2Image'
import { computed, onMounted, ref, watch } from 'vue'
import { getLocalWord } from '../api/index'
import calendarFormatter from '../utils/calendarFormatter'
const dt = new Date()

let nongli = calendarFormatter.solar2lunar(dt.getFullYear(), dt.getMonth() + 1, dt.getDate());

const oldYear = nongli.gzYear + nongli.Animal + '年'
const oldMonth = nongli.gzMonth + '月' + nongli.gzDay + '日'
const oldDay = nongli.IMonthCn + nongli.IDayCn
const newYear = nongli.cYear
const newMonth = nongli.cMonth
const newDay = nongli.cDay
const ncWeek = nongli.ncWeek
const curWord = ref({})
const isShowImg = ref(true)
const isShowTitle = ref(true)
const titleIndex = ref('001')
const titleTotal = ref(100)
const titleContent= ref('')
onMounted(() => {
  try {
    curWord.value = localStorage.getItem('word') || '天道酬勤'
    let arr = localStorage.getItem('subtitle')
    if(arr) {
      arr = JSON.parse(arr)
      titleIndex.value = arr[0]
      titleTotal.value = arr[1]
      titleContent.value = arr[2]
    }
  } catch(err) {
    
  }
})
const margeTop = computed(()=>{
  // 如果 titleContent的内容的字数<11, 说明只有一行，则margintop为4
  if(titleContent.value.length<11){
    return {'margin-top':'5vh'}
  } else 
  return {'margin-top':'4vh'}
})

const getWords = () => {
  curWord.value = prompt('请输入日签内容', curWord.value)
  localStorage.setItem('word', curWord.value)
}
const getTitle = () => {
  const str = prompt('设置标题', titleIndex.value+'--'+titleTotal.value+'--'+titleContent.value)
  const arr = str.split('--')
  console.log(str, arr)
  localStorage.setItem('subtitle', JSON.stringify(arr))
  titleIndex.value = arr[0]
  titleTotal.value = arr[1]
  titleContent.value = arr[2]
}

// const src = computed(() => require('../assets/cover-06.jpg'))
// const imgURLAPI = 'http://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=3'resolution=1366
const imgURLAPI = 'https://bing.biturl.top/?&format=json&index=0&mkt=zh-CN'
const imgUrl = ref(new URL(`../assets/cover-5.jpg`, import.meta.url).href)
onMounted(() => {
  getAssetURL()
})
const getAssetURL = () => {
  fetch(imgURLAPI)
    .then(response => response.json())
    .then(data => {
      // 处理返回的数据
      console.log(data)
      imgUrl.value = data.url.replace('1920x1080', '768x1366')
    })
    .catch(error => {
      // 处理请求错误
    });
  // return new URL(`../assets/cover-${newMonth}.jpg`, import.meta.url).href
}

const show = ref(false)
const currentImg = ref('')

const shareImg = async () => {

  const el = document.querySelector('.home')
  // const canvasFalse = document.createElement('canvas')
  const width = parseInt(window.getComputedStyle(el).width)
  const height = parseInt(window.getComputedStyle(el).height)
  console.log('width:', width, 'height:', height)
  let canvas = await autoPicture(el, {
    scale: window.devicePixelRatio < 3 ? window.devicePixelRatio : 2,
     width, height })
  if (canvas) {
    currentImg.value = canvas
    show.value = true
    // canvas为转换后的Canvas对象
    let oImg = new Image()
    oImg = currentImg.value // 导出图片
    console.log(oImg)
    var oA = document.createElement('a')
    oA.download = '分享内容' // 设置下载的文件名，默认是'下载'
    oA.href = oImg
    document.body.appendChild(oA)
    oA.click()
    oA.remove() // 下载之后把创建的元素删除
  }
}
</script>

<style lang="less" scoped>
.home{
  background-color: #fff;
  height: 100vh;
}
.header {
  top: 50px;
  padding-left: 10px;
  position: relative;
  color: #ffffffab;
}
.subtitle{
  text-align: center;
  color:#fff;
  padding: 14.5vh 10vw 0;
  .titleindex{
    // font-size: 20px;
    margin: 0;
    padding: 0;
  }
  .titlecontent{
    font-size: 24px;
  }
}
.preview {
  position: fixed;
  width: 80%;
}
footer{
  width: 100vw;
  font-size: 12px;
  color: #ccc;
  height: 50px;
  line-height: 50px;
  text-align: center;
  position: absolute;
  bottom: 2vh;
}

  .cover-photo-box {
    top: -40px;
    width: 100vw;
    // aspect-ratio: 768/1366;
    height: 60vh;
    position: relative;
    clip-path: ellipse(100% 50% at 50% 50%);
    .cover-photo {
      width: 100%;
    }
    
  }
  .date {
    position: absolute;
    top: 8vh;
    right:4vw;
    width: 18vw;
    line-height: 1.2;
    z-index: 1;
    text-align: center;
    background-color: #fff;
    background-color: rgba(255,255,255,.1);
    backdrop-filter: blur(3px);
    padding: 4px;
  }


  .content-box {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: end;
    top: -50px;
    padding: 4vw;
    
    line-height: 2em;
    text-align: left;
    max-height: 50vh;
    font-size: 4.2vw;
    color: #040404;
    .sentence {
      width: 60vw;
    }
    .share-img {
      width: 20vw;
    }
  }

</style>